<script setup>
// import tinymce from 'tinymce/tinymce'; // Adjust the path based on how you installed TinyMCE
// import 'tinymce/icons/default';
// import 'tinymce/themes/silver';
// import '../public/tinymce/zh_CN.js'

import Editor from "@tinymce/tinymce-vue";
const props = defineProps({
  required: {
    type: Boolean,
    default: false,
  },
  label: {
    type: String,
    default: "",
  },
});
</script>

<template>
  <div class="item">
    <TipsItem :required="props.required" :label="props.label"></TipsItem>
  </div>
  <main id="sample">
    <Editor
      api-key="roxvxsb5ud11jbubddy1fnu8wd1sfuooaru4hgpwe3vdgkau"
      :init="{
        language_url: '/tinymce/zh_CN.js',
        language: 'zh_CN',
        plugins: 'lists link image table code help wordcount',
        forced_root_block: false, //删除在tinymce中自动添加p标签 无效
        statusbar: false, //隐藏底部菜单状态
        width: '100%',
        color: 'green',
        //toolbar: 'code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify outdent indent | \
        //styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \
        //table image media charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs',

        toolbar:
          'undo redo | bold italic | strikethrough | formatselect | forecolor backcolor | anchor | image | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | lists media | removeformat | visualblocks | preview| fullscreen | code ',
        //branding: false, //  是否禁用 “Power by Tinymce”
      }"
    />
  </main>
</template>

<style scoped lang="scss">
@import "@/assets/styles/theme.scss";

@media (min-width: 1024px) {
  #sample {
    display: flex;
    flex-direction: column;
    place-items: center;
    width: 100%;
  }
}
::v-deep .tox .tox-tbtn svg {
  fill: #a7adb2;
}

::v-deep .tox .tox-mbtn__select-label {
  color: #afb5b6;
}
</style>
